<template>
    <div id="app">
        <Loading v-if="$store.state.bLoading" />

        <Header placeholder="请输入搜索内容" v-if="$store.state.bHeader" />
        <Nav :title="title" v-if="$store.state.bHeader" />

        <router-view />

        <Footer v-if="$store.state.bFooter" />
    </div>
</template>

<script>
import Header from "./Header";
import Nav from "../components/Nav";
import Footer from "./Footer";
import Loading from "../components/loading";
import { mapState } from "../store/state";
import {UPDATE_HEADER,UPDATE_FOOTER,UPDATE_LOADING} from "../store/types";

export default {
    name: "App",
    components: {
        Header,
        Nav,
        Footer,
        Loading
    },
    data() {
        return {
            title: ["推荐", "手机数码", "健康生活", "电子票券", "家用电器"],
            images: [
                "./images/banner1.jpg",
                "./images/banner1.jpg",
                "./images/banner1.jpg"
            ],
            cateNav: []
        };
    },
    watch: {
        $route: {
            handler(nR, oR) {
                let path = nR.path;
                // console.log(path)
                if (/home/.test(path)) {
                    this.$store.commit(UPDATE_HEADER, true);
                    this.$store.commit(UPDATE_FOOTER, true);
                }
                if (/login|reg|cart/.test(path)) {
                    this.$store.commit(UPDATE_HEADER, false);
                    this.$store.commit(UPDATE_FOOTER, false);
                }
                if (/cate/.test(path)) {
                    this.$store.commit(UPDATE_HEADER, false);
                    this.$store.commit(UPDATE_FOOTER, true);
                    this.$store.commit(UPDATE_LOADING, false);
                }
                if (/good/.test(path)) {
                    this.$store.commit(UPDATE_HEADER, false);
                    this.$store.commit(UPDATE_FOOTER, false);
                }
            },
            immediate: true
        }
    }
};
</script>

<style scoped>
#app {
    width: 100%;
}
</style>
